<template>
  <div class="login-container">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" class="login-form" auto-complete="on" label-position="left"  @keyup.enter.native="dataFormSubmit()" >
      <div class="title-container">
        <h3 class="login-title">视觉智能虚拟仿真平台教师端登录</h3>
      </div>
      <!-- <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon> -->
        <el-form-item prop="account" >
          <span class="svg-container">
            <icon-svg icon-class="user" name="user" />
          </span>
          <el-input
            ref="account"
            v-model="dataForm.account"
            placeholder="Account"
            name="account"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
          <!-- <el-input v-model="dataForm.account" placeholder="帐号"></el-input> -->
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <icon-svg icon-class="password" name="password" />
          </span>
          <el-input
            ref="password"
            v-model="dataForm.password"
            placeholder="password"
            name="password"
            type="password"
            tabindex="1"
            auto-complete="on"
          />
          <!-- <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input> -->
        </el-form-item>
        <el-form-item prop="code">

          <el-row :gutter="10">
            <el-col :span="11">
              <span class="svg-container">
                <icon-svg icon-class="yanzhen" name="yanzhen" />
              </span>
              <el-input v-model="dataForm.code" placeholder="验证码">
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>
<script>
   /* eslint-disable */
   import { getUUID } from '@/utils'
   export default {
     data () {
       return {
         dataForm: {
           account: '',
           password: '',
           uuid: '',
           captcha: '',
           userType: 0
         },
         dataRule: {
           account: [
             { required: true, message: '帐号不能为空', trigger: 'blur' }
           ],
           password: [
             { required: true, message: '密码不能为空', trigger: 'blur' }
           ],
           code: [
             { required: true, message: '验证码不能为空', trigger: 'blur' }
           ]
         },
         captchaPath: ''
       }
     },
     created () {
       this.getCaptcha()
     },
     methods: {
       // 提交表单
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$http({
               url: this.$http.adornUrl('/login/login'),
               method: 'post',
               data: this.$http.adornData({
                 'account': this.dataForm.account,
                 'password': this.dataForm.password,
                 'uuid': this.dataForm.uuid,
                 'code': this.dataForm.code,
                 'userType': this.dataForm.userType
               })
             }).then(({data}) => {
               if (data.success) {
                 this.$cookie.set('teacherToken', data.data)
                 this.$router.replace({ name: 'home' })
               } else {
                 this.getCaptcha()
                 this.$message.error(data.message)
               }
             })
           }
         })
       },
       // 获取验证码
       getCaptcha () {
         this.dataForm.uuid = getUUID()
         this.captchaPath = this.$http.adornUrl(`/login/captcha.jpg?uuid=${this.dataForm.uuid}`)
       }
     }
   }
</script>

<style lang="scss">
  /* 标题 */
  .login-title {
    color: #303133;
    text-align: center;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
      height: 37px;
    }
  }
.login-form {
  width: 500px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: #fff; /* 透明背景色 */
  opacity: 0.8;
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(~@/assets/img/login_bg.jpg);
}
.login-btn-submit {
      width: 100%;
      margin-top: 38px;
    }
.svg-container {
    padding: 6px 30px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
 .el-input {
     display: inline-block;
     height: 47px;
     width: 75%;
     }
</style>
